<template>
    <div class="home-wrap">
        <div class="home-body text-center text-white">
            <div class="text-wrap">Demo Page</div>
            <div>前往 /src/components/skin/demo/Home.vue 开发</div>
            <div class="margin-top">
                <a-button type="primary" shape="circle" size="small" @click="settingPanel">
                    <template #icon>
                        <SettingOutlined/>
                    </template>
                </a-button>
            </div>
            <div class="margin-top">
                <a-button size="small" type="primary" @click="changeConfig('YES')">变更key2</a-button>
                &nbsp;
                <a-button size="small" type="primary" @click="changeConfig('NO')">继续变更</a-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {useStore} from "vuex";
    import {SettingOutlined} from '@ant-design/icons-vue';

    export default {
        // 组件
        components: {
            SettingOutlined,
        },
        // 数据
        data() {
            return {
                // 获取在 website.js 中的配置
                config: useStore().state.skin.demo,
            }
        },
        // DOM未渲染前调用
        created() {
            console.log('config->', this.config);
        },
        // DOM渲染后调用
        mounted() {
        },
        // 方法
        methods: {
            // 打开设置面板
            settingPanel() {
                this.$store.commit('openSettingPanel');
            },
            // 变更配置数据
            changeConfig(val) {
                this.$store.commit('setNowSkinConfig', {key: 'key2', val: val});
            },
        }
    }
</script>

<style lang="less" scoped>
    .home-wrap {
        width: 100%;

        .home-body {
            .text-wrap {
                width: 100%;
                margin-top: 100px;
                text-align: center;
                font-size: 40px;
            }
        }
    }
</style>